<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />

  </head>

  <body>
    <div class="box">
      <!-- 标题模块 -->
      <div class="box-title">
        <h2>目的地指数</h2>
        <span>覆盖全球酒店，你想住的，我们都有</span>
      </div>
      <!-- 选项列表模块 -->
      <div class="box-list">
        <div class="list-top"><span></span>国内</div>

        <div class="list-text">
          <ul>
            <li data-index="0" class="active">登高踏青</li>
            <li data-index="1">小憩温泉</li>
            <li data-index="2">天然氧吧</li>
            <li data-index="3">草原撒欢</li>
            <li data-index="4">小镇时光</li>
            <li data-index="5">美食之城</li>
          </ul>
        </div>

        <a href="#">更多>></a>
      </div>
      <!-- 景点模块 -->
      <div class="box-list-attractions" >
        <div class="box-attractions"  style="display: block;">
          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/dgtq-hs.jpg" alt="" />
              <span>黄山</span>
            </div>

            <div class="text-p">
              <p>春意撩人 登高踏青赏春色</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/dgtq-ems.jpg" alt="" />
              <span>峨眉山</span>
            </div>

            <div class="text-p">
              <p>阳春三月 闻着茶香去峨眉</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/dgtq-wts.jpg" alt="" />
              <span>五台山</span>
            </div>

            <div class="text-p">
              <p>迎春 祈福 登五台</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/dgtq-ls.jpg" alt="" />
              <span>庐山</span>
            </div>

            <div class="text-p">
              <p>亲近自然 春游庐山</p>
            </div>
          </div>
        </div>

        <div class="box-attractions">
          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/hbtl-tianmuhu.jpg" alt="" />
              <span>江苏天目湖</span>
            </div>

            <div class="text-p">
              <p>古树错落 帝王温泉色</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/hbtl-tianmuweihai.jpg" alt="" />
              <span>威海天沐威海温泉</span>
            </div>

            <div class="text-p">
              <p>森林温泉 草木养生</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/hbtl-zhongshan.jpg" alt="" />
              <span>广东中山温泉</span>
            </div>

            <div class="text-p">
              <p>毗邻港澳 商务养生</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/hbtl-anbo.jpg" alt="" />
              <span>辽宁大连安波温泉</span>
            </div>

            <div class="text-p">
              <p>延年益寿 名誉中外</p>
            </div>
          </div>
        </div>

        <div class="box-attractions">
          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/hbtl-lasa.jpg" alt="" />
              <span>拉萨</span>
            </div>

            <div class="text-p">
              <p>高原古城 圣山天湖 沁人心脾</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/hbtl-dali.jpg" alt="" />
              <span>大理</span>
            </div>

            <div class="text-p">
              <p>文献名邦 彩云之南 空谷幽兰</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/hbtl-zhongshan.jpg" alt="" />
              <span>舟山</span>
            </div>

            <div class="text-p">
              <p>东海翡翠 舟山群岛 气候宜人</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img src="./images/hbtl-xiamen.jpg" alt="" />
              <span>厦门</span>
            </div>

            <div class="text-p">
              <p>天风海涛 鼓浪岛屿 鸟语芬芳</p>
            </div>
          </div>
        </div>

        <div class="box-attractions">
          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/cysh-xlgl.jpg"
                alt=""
              />
              <span>锡林郭勒</span>
            </div>

            <div class="text-p">
              <p>草原 牧民 小马驹</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img
                src="	https://img.elongstatic.com/index/termini/cysh-bs.jpg"
                alt=""
              />
              <span>坝上</span>
            </div>

            <div class="text-p">
              <p>帝都最近的草原</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/cysh-reg.jpg"
                alt=""
              />
              <span>若尔盖</span>
            </div>

            <div class="text-p">
              <p>高原上的绿洲</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/cysh-qls.jpg"
                alt=""
              />
              <span>祁连山</span>
            </div>

            <div class="text-p">
              <p>风景如画 醉梦祁连山</p>
            </div>
          </div>
        </div>

        <div class="box-attractions">
          <div class="box-img-text">
            <div class="box-img">
              <img
                src="	https://img.elongstatic.com/index/termini/termini_t3_xt.jpg"
                alt=""
              />
              <span>西塘</span>
            </div>

            <div class="text-p">
              <p>烟雨长廊 景色好似宣纸画</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/termini_t3_hs.jpg"
                alt=""
              />
              <span>和顺</span>
            </div>

            <div class="text-p">
              <p>古风犹存 如诗如画</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/termini_t3_wz.jpg"
                alt=""
              />
              <span>乌镇</span>
            </div>

            <div class="text-p">
              <p>推窗见水 小桥人家</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/termini_t3_py.jpg"
                alt=""
              />
              <span>平遥</span>
            </div>

            <div class="text-p">
              <p>晋商遗风 古城探幽</p>
            </div>
          </div>
        </div>

        <div class="box-attractions">
          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/termini_t4_xg.jpg"
                alt=""
              />
              <span>香港</span>
            </div>

            <div class="text-p">
              <p>只有想不到，没有找不到</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/termini_t4_cd.jpg"
                alt=""
              />
              <span>成都</span>
            </div>

            <div class="text-p">
              <p>不只有火锅，吃是头等事</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/termini_t4_yz.jpg"
                alt=""
              />
              <span>扬州</span>
            </div>

            <div class="text-p">
              <p>吴侬软语 淮味养人</p>
            </div>
          </div>

          <div class="box-img-text">
            <div class="box-img">
              <img
                src="https://img.elongstatic.com/index/termini/termini_t4_cs.jpg"
                alt=""
              />
              <span>长沙</span>
            </div>

            <div class="text-p">
              <p>美食怕不辣，湘味最十足</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  
    <script src="./js/jquery-3.6.0.js"></script>

    <!-- jq语法选项卡 -->
      <!-- js语法选项卡 -->
    <script>
         
    </script>
  </body>
</html>
